Angular-এ ফর্ম ব্যবস্থাপনা করার জন্য Reactive Forms এবং Template-driven Forms দুটি পদ্ধতি রয়েছে। এদের মধ্যে Reactive Forms পদ্ধতি ফর্মের FormGroup এবং FormControl ব্যবহার করে ডেটার ম্যানেজমেন্ট, ভ্যালিডেশন, এবং সাবমিশন সহজভাবে পরিচালনা করতে সহায়ক। এখানে আমরা FormGroup এবং FormControl সম্পর্কে বিস্তারিত আলোচনা করব।

FormGroup

FormGroup একটি গঠনমূলক ক্লাস যা এক বা একাধিক FormControl বা অন্যান্য FormGroup কে একটি ইউনিট হিসেবে সংগঠিত করে। এটি মূলত একাধিক ফর্ম কন্ট্রোলকে একটি গ্রুপে রাখার জন্য ব্যবহৃত হয়, যাতে ফর্মের ডেটা এবং স্টেট ম্যানেজমেন্ট সহজ হয়।

FormGroup এর উদাহরণ:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
})
export class UserFormComponent {
  userForm: FormGroup;

  constructor() {
    // FormGroup তৈরির সময় FormControl এর সাথে ভ্যালিডেটর যুক্ত করা হচ্ছে।
    this.userForm = new FormGroup({
      name: new FormControl('', Validators.required),
      email: new FormControl('', [Validators.required, Validators.email]),
      age: new FormControl('', [Validators.required, Validators.min(18)]),
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    }
  }
}

এখানে, userForm একটি FormGroup যা ৩টি FormControl (name, email, এবং age) নিয়ে গঠিত। Validators ব্যবহার করে ফিল্ডের জন্য ভ্যালিডেশন চেক করা হয়েছে।

FormControl

FormControl হলো একটি একক ইনপুট কন্ট্রোল যা Angular ফর্মে ব্যবহারকারী দ্বারা প্রদত্ত মান এবং তার স্টেট (যেমন, প্রিসেট মান, ডির্টি, প্রিস্টিন, টাচড, আনটাচড ইত্যাদি) সুরক্ষিত করে। এটি একটি সিঙ্গেল ভ্যালু ধারণ করে এবং সাধারণত FormGroup এর ভিতরে ব্যবহার করা হয়।

FormControl এর উদাহরণ:

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-email-form',
  templateUrl: './email-form.component.html',
})
export class EmailFormComponent {
  emailControl: FormControl;

  constructor() {
    // FormControl ইনস্ট্যান্স তৈরি
    this.emailControl = new FormControl('', [Validators.required, Validators.email]);
  }

  onSubmit() {
    if (this.emailControl.valid) {
      console.log(this.emailControl.value);
    }
  }
}

এখানে, emailControl একটি FormControl যা email ইনপুটের জন্য ব্যবহৃত হয়। ভ্যালিডেশন প্রয়োগ করা হয়েছে যাতে ইনপুটটি অবশ্যই একটি সঠিক ইমেইল ঠিকানা হয়।

FormGroup এবং FormControl এর মধ্যে পার্থক্য

• FormGroup হল একাধিক FormControl বা অন্য FormGroup এর একটি গ্রুপ। এটি একটি ফর্মের বিভিন্ন ক্ষেত্রকে একত্রিত করে এবং তাদের একটি ইউনিট হিসেবে পরিচালনা করতে সহায়ক হয়।
• FormControl একটি একক ইনপুট ফিল্ডের মান এবং তার স্টেট (যেমন টাচড, ডির্টি ইত্যাদি) পরিচালনা করে।

Form Group এর সাথে ডেটা ম্যানিপুলেশন

আপনি FormGroup এর ডেটা অ্যাক্সেস করতে পারেন এবং সেটিকে পরিবর্তন করতে পারেন:

FormGroup এর ডেটা অ্যাক্সেস:

console.log(this.userForm.value);  // এটি ফর্মের সব ভ্যালু দেখাবে।

FormControl এর ভ্যালু আপডেট:

this.userForm.controls['name'].setValue('John Doe');

এখানে, setValue মেথড ব্যবহার করে FormControl এর মান পরিবর্তন করা হয়েছে।

ভ্যালিডেশন

Angular Reactive Forms এ FormControl এবং FormGroup এর জন্য আপনি বিভিন্ন ধরনের ভ্যালিডেশন প্রয়োগ করতে পারেন:

সিঙ্গেল কন্ট্রোল ভ্যালিডেশন:

new FormControl('', Validators.required);

একাধিক কন্ট্রোল ভ্যালিডেশন:

new FormControl('', [Validators.required, Validators.email]);

কাস্টম ভ্যালিডেশন:

import { AbstractControl, ValidationErrors } from '@angular/forms';

function forbiddenNameValidator(control: AbstractControl): ValidationErrors | null {
  const forbidden = /admin/i.test(control.value);
  return forbidden ? { forbiddenName: { value: control.value } } : null;
}

new FormControl('', [forbiddenNameValidator]);

এখানে, একটি কাস্টম ভ্যালিডেটর তৈরি করা হয়েছে যা "admin" শব্দটি ইনপুটে থাকলে সেটি অবৈধ হিসেবে চিহ্নিত করবে।

ফর্ম সাবমিশন

ফর্ম সাবমিট করার সময়, আপনি ফর্মের ভ্যালিডিটি চেক করে ডেটা প্রসেস করতে পারেন। নিচের কোডটি একটি সাধারণ উদাহরণ:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <input formControlName="name" placeholder="Name">
  <input formControlName="email" placeholder="Email">
  <input formControlName="age" placeholder="Age">
  <button type="submit" [disabled]="!userForm.valid">Submit</button>
</form>

এখানে, ngSubmit ইভেন্ট ফর্ম সাবমিট হওয়ার পর onSubmit() মেথডটি কল করবে। [disabled]="!userForm.valid" দিয়ে সাবমিট বাটনটি শুধুমাত্র ফর্মের ভ্যালিড হলে অ্যাকটিভ হবে।

সারাংশ

FormGroup এবং FormControl Angular Reactive Forms-এ ফর্ম ডেটা এবং তার ভ্যালিডেশন পরিচালনা করতে ব্যবহৃত হয়। FormGroup একাধিক FormControl বা FormGroup এর একটি গ্রুপ হিসেবে কাজ করে, এবং FormControl একক ইনপুট ফিল্ডের মান এবং স্টেট পরিচালনা করে। এই দুটি ফিচার ফর্ম ম্যানেজমেন্টকে আরও সহজ এবং শক্তিশালী করে তোলে।